<template>
  <div>
    <a class="pointer" :href="this.link.url" target="_blank">
      <p>{{this.link.title}}</p>
      <div class="mt5 clear">
        <zz-user :srcProps="this.link.image" class="left"></zz-user>
        <p class="left">{{this.link.content}}</p>
      </div>
    </a>
  </div>
</template>

<script>
  export default {
    name: 'zz-link',
    data () {
      return {
        link: {}
      }
    },
    props: {
      content: {
        type: String,
        default: ''
      }
    },
    watch: {
      content () {
        this.init()
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.link = JSON.parse(this.content)
      }
    }
  }
</script>
